//所有方法的入口
var $vui={
    /**
     * 提示 loading
     * 用法 $vui.loading("拼命加载中，请稍后...",{time:2,icon:'aaaaa'，overlay:true,callback:alert()});
     * @param {Object} msg 提示语
     * @param {Object} time 关闭时间
     * @param {Object} icon 图标overlay
     * @param {Object} overlay 是否有遮罩层
     * @param{function} callback 关闭时执行的回调函数
     * z-index 100
     */
    Loading:function(msg,options){
        new tzloading(msg,options);
    },
    /**
     * 关闭loadling
     */
    loadClose:function () {
        var $loading=$("#tz-loading");
        $(".tzui-loading-overlay").remove();
        $loading.removeClass().addClass(tz_animateOut());
    },
    /**
     * 检查页面的加载状态 要是加载完就关闭loadling
     */
    loadState:function () {
        //监听加载状态改变
        document.onreadystatechange = completeLoading;
        //加载状态为complete时移除loading效果
        function completeLoading() {
            if (document.readyState == "complete") {
                $vui.loadClose();
            }
        }
    },
    /**
     * 弹出层 dialog
     * 用法 $vui.doalog({
	 * content:'您确定要删除吗?',
	 * ok:'确定'
	 * close：'取消'
	 * icon:'icon-comment',
	 * callback:function(ok){
			if(ok)alert("1");
			else alert("2");
		}});
     * @param {Object} title 标题
     * @param {Object} time
     * @param {Object} ok 确认按钮文字
     * @param {Object} close 关闭按钮文字
     * @param {Object} icon 图标
     * @param {Object} handler 拖拽的委托对象
     * @param {Object} overlay 是否有遮罩层
     * @param{function} callback 关闭时执行的回调函数
     * z-index 100
     */
    Dialog:function(options){
        $.tzDialog(options);
    },
    /**
     * 弹出层 dialog
     * 用法 $vui.doalog({
	 * content:'您确定要删除吗?',
	 * ok:'确定'
	 * icon:'icon-comment',
	 * callback:function(ok){
			if(ok)alert("1");
			else alert("2");
		}});
     * @param {Object} title 标题
     * @param {Object} time
     * @param {Object} ok
     * @param {Object} type 提示性
     * @param {Object} icon 图标
     * @param {Object} handler 拖拽的委托对象
     * @param {Object} overlay 是否有遮罩层
     * @param{function} callback 关闭时执行的回调函数
     * z-index 100
     */
    Confirm:function(options){
        $.tzConfirm(options);
    }
}
//------------------------------------弹出loading-------------------------------------------------------------------------------------------
var tzloading=function  tzloading(msg,options){
    var opts=$.extend({},tzloading.defaut,options);
    this.init(msg,opts.timeout,opts);

}
tzloading.prototype={
    init:function(msg,timeout,opts){
        var $loading=this.template(msg,opts);
        //定位
        tzUtil._position($loading).resize($loading);
        //事件绑定
        this.events($loading,opts);
        //关闭时间
        this.timeout($loading,timeout);
    },
    //loading模板
    template:function(msg,opts){
        $("#tz-loading").remove();
        var $loading=$("#tz-loading");
        $loading=$('<div id="tz-loading" title="点我关闭"></idv>');
        var $con=$('<div class="tz-loading-cnt"></idv>');
        var $conl=$('<div class="tz-loading-cnt-l"><span style="font-size: 22px;"></span></idv>')
        var $conr=$('<div class="tz-loading-cnt-r"></div>');
        var $sp=$('<span></span>');
        $sp.html(msg);
        $loading.append($con.append($conl).append($conr.append($sp)));
        $loading.find(".tz-loading-cnt-l span").removeClass().addClass(opts.icon);
        $loading.removeClass().addClass(tz_animateIn());
        $("body").append($loading);
        if(opts.overlay){
            $("body").append("<div class='tzui-loading-overlay'></div>");
            $loading.next().click(function(){
                $(this).remove();
                $loading.trigger("click");
            });
        }
        return $loading;
    },
    //添加点击事件
    events :function($loading,opts){
        $loading.click(function(){
            $(this).next().remove();
            //$(this).remove();
            //tzUtil.animates($(this),"left");
            $(this).removeClass().addClass(tz_animateOut());
            if(opts.callback)opts.callback($loading);
        });
    },
    //关闭事件
    timeout:function($loading,timeout){
        var timer = null;
        if(tzUtil.isNotEmpty(timeout)&& timeout >0){
            clearTimeout(timer);
            timer = setTimeout(function(){
                //事件的触发
                $loading.trigger("click");
            },timeout*1000);
        }
    }
}
//默认参数
tzloading.defaut={
    timeout:3,
    icon:"icon icon-spin icon-spinner-indicator",
    overlay:true,
    callback:function(){
    }
}
//------------------------------------弹出dialog-------------------------------------------------------------------------------------------------
$.tzDialog=function(options){
    var opts=$.extend({}, $.tzDialog.defaults, options);
    $.tzDialog.methods.init(opts);
};

$.tzDialog.methods={
    init:function(opts){
        var $dialog=this.template(opts);
        //事件初始化
        this.events($dialog,opts);
        this.params($dialog,opts);
    },
    params:function($dialog,opts){
        //居中
        tzUtil._position($dialog).resize($dialog);
        //开启拖拽
        $dialog.Drag(opts);
    },
    //模板
    template:function(opts){
        $("#tz-dialog").remove();
        var $dialog=$('<div class="dialog" data-calss="" id="tz-dialog">'+
            '	<div class="dialog-title" style="cursor: move;">'+
            '		<span>'+opts.title+'</span>'+
            '	</div>'+
            '	<div class="dialog-content">'+
            '		<div class="dialog-close">'+
            '			<i class="icon icon-times"></i>'+
            '		</div>'+
            '		<div class="ctx">'+
            '			<i class='+opts.icon+' style="font-size: 26px;"></i>'+
            '			<span>'+opts.content+'</span>'+
            '		</div>'+
            '	</div>'+
            '	<div class="dialong-footer">'+
            '		<a class="btn-ok">'+opts.ok+'</a>'+
            '	<a class="btn-close">'+opts.close+'</a>'+
            '	</div>'+
            '</div>');
        $('body').append($dialog).append("");
        var $lang=tz_animateIn();
        $dialog.attr("data-calss",$lang)
        $dialog.addClass($lang);
        if(opts.overlay){
            $("body").append("<div class='tzui-loading-overlay'></div>");
        }
        return $dialog;
    },
    events:function($dialog,opts){
        var $lang=$dialog.attr("data-calss");
        $dialog.attr("data-calss","");
        //确定
        $dialog.find('.btn-ok').on("click",function(){
            if(opts.callback)
                opts.callback(true);
            $dialog.next().remove();
            //tzUtil.animates($dialog,'fadeOut');
            $dialog.removeClass($lang).addClass(tz_animateOut());
        });
        //关闭
        $dialog.find('.btn-close').on("click",function(){
            if(opts.callback)
                opts.callback(false);
            $dialog.next().remove();
            //tzUtil.animates($dialog,'fadeOut');
            $dialog.removeClass($lang).addClass(tz_animateOut());
        });
        //关闭
        $dialog.find('.dialog-close').on("click",function(){
            $dialog.next().remove();
            //tzUtil.animates($dialog,'top');
            $dialog.removeClass($lang).addClass(tz_animateOut());
        });
        return $dialog;
    },

};

//默认参数
$.tzDialog.defaults={
    title:'信息',
    icon:'icon-comment',
    ok:'确定',
    close:'取消',
    handle:'.dialog-title',
    callback:function(ok){},
    overlay:true

};
//------------------------------------弹出confirm----------------------------------------------------------------------------------------------
$.tzConfirm=function(options){
    var opts=$.extend({}, $.tzConfirm.defaults, options);
    $.tzConfirm.methods.init(opts);
};

$.tzConfirm.methods={
    init:function(opts){
        var $dialog=this.template(opts);
        //事件初始化
        this.events($dialog,opts);
        this.params($dialog,opts);
    },
    params:function($dialog,opts){
        //居中
        tzUtil._position($dialog).resize($dialog);
        //开启拖拽
        $dialog.Drag(opts);
    },
    //模板
    template:function(opts){
        $("#tz-confirm").remove();
        var $dialog=$('<div class="confirm" data-calss="" id="tz-confirm">'+
            '	<div class="dialog-title" style="cursor: move;">'+
            '		<span>'+opts.title+'</span>'+
            '	</div>'+
            '	<div class="dialog-content">'+
            '		<div class="dialog-close">'+
            '			<i class="icon icon-times"></i>'+
            '		</div>'+
            '		<div class="ctx">'+
            '			<i class='+opts.icon+' style="font-size: 26px;color:'+opts.color+'"></i>'+
            '			<span>'+opts.content+'</span>'+
            '		</div>'+
            '	</div>'+
            '	<div class="dialong-footer">'+
            '		<a class="btn-ok">'+opts.ok+'</a>'+
            '	</div>'+
            '</div>');
        var $lang=tz_animateIn()
        $dialog.attr("data-calss",$lang);
        $dialog.addClass($lang);
        $('body').append($dialog).append("");
        if(opts.overlay){
            $("body").append("<div class='tzui-loading-overlay'></div>");
        }
        return $dialog;
    },
    events:function($dialog,opts){
        var $lang=$dialog.attr("data-calss");
        $dialog.attr("data-calss","");
        //确定
        $dialog.find('.btn-ok').on("click",function(){
            if(opts.callback)
                opts.callback(true);
            $dialog.next().remove();
            //tzUtil.animates($dialog,'fadeOut');
            $dialog.removeClass($lang).addClass(tz_animateOut());
        });
        //关闭
        $dialog.find('.dialog-close').on("click",function(){
            $dialog.next().remove();
            //tzUtil.animates($dialog,'top');
            $dialog.removeClass($lang).addClass(tz_animateOut());
        });
        return $dialog;
    },

};

//默认参数
$.tzConfirm.defaults={
    title:'信息',
    icon:'icon-bell',
    color:'#3280fc;',//错误 #e75033; 警告 #f1a325;  成功#03b8cf;
    ok:'确定',
    handle:'.dialog-title',
    callback:function(ok){},
    overlay:true

};
//--------------------------------------------------------------tab页的调用---------------------------------------------------------------------
$.fn.tzTab = function(options){
    var opts = $.extend({},$.fn.tzTab.methods,$.fn.tzTab.defaults,options);
    this.each(function(){
        var optss = $.extend({},opts,$.fn.tzTab.parseOptions($(this)));
        opts.init($(this),optss);
    });
};

$.fn.tzTab.methods = {
    init : function($tab,opts){
        $tab.addClass("tzui-tabs");
        var $ul = $("<ul class='tzui-tabs-nav'></ul>");
        var liHtml = "";
        var contentHtml = "";
        var jdata = opts.tabDatas;
        var length = jdata.length;
        var className = "tzui-state-default";

        if(opts.index==0 || opts.index>length)opts.index=0;//边界判断
        for(var i=0;i<length;i++){
            var classStyle = "display:none";
            if(opts.index == i){
                className="tzui-tabs-active tzui-state-active";
                classStyle="";
            }
            liHtml+= "<li tab='tab-"+i+"' data-url='"+jdata[i].url+"' class='"+className+"'><a href='javascript:void(0)' class='tzui-tabs-anchor'>"+jdata[i].title+"</a></li>";
            contentHtml+="<div id='tab-"+i+"' class='tzui-tabs-panel' style='"+classStyle+"'>"+jdata[i].content+"</div>";
            className = "";
        }
        $ul.html(liHtml);
        $tab.append($ul);
        //面板内容
        $tab.append(contentHtml);
        if(opts.width)$tab.width(opts.width);
        if(opts.height)$tab.height(opts.height);
        if(opts.background){
            $tab.css("border","2px solid "+opts.background);
            $ul.css({"background":opts.background});
            $ul.find("li>a").filter(function(){
                if(!$(this).parent().hasClass("tzui-state-active")){
                    $(this).css({"background":opts.background,"color":"#fff"});
                }
            });
        }

        if(opts.linear && opts.border){
            $tab.css("border","2px solid "+opts.border);
            $ul.css({"background":"linear-gradient("+opts.linear+")"});
            $ul.find("li>a").filter(function(){
                if(!$(this).parent().hasClass("tzui-state-active")){
                    $(this).css({"background":"linear-gradient("+opts.linear+")","color":"#fff"});
                }
            });
        }

        $tab.find(".tzui-tabs-nav > li").on(opts.event,function(){
            var markFlag = $(this).hasClass("tzui-tabs-active");
            if(markFlag)return;
            var tab = $(this).attr("tab");
            $(this).addClass("tzui-tabs-active tzui-state-active").siblings().removeClass("tzui-tabs-active tzui-state-active");
            $tab.find(".tzui-tabs-panel").hide();
            var $content = $tab.find("#"+tab);
            $content.show();
            $(this).find("a").removeAttr("style");
            if(opts.linear && opts.border){
                $(this).siblings().find("a").css({"background":"linear-gradient("+opts.linear+")","color":"#fff"});
            }else{
                $(this).siblings().find("a").css({"background":opts.background,"color":"#fff"});
            }
            if(opts.callback)opts.callback($(this),$content);
            //当前元素解绑事件
        });


    }
};

$.fn.tzTab.parseOptions = function($target){
    var datas = $target.find(".data").text();
    var json = {
        width:$target.data("width"),//选项卡的宽度
        height:$target.data("height"),//选项卡的高度
        event:$target.data("event"),//选项卡的事件类型
        background:$target.data("background"),
        linear:$target.data("linear"),
        border:$target.data("border"),
        index:$target.data("index")//默认选择哪一个
    };
    if(datas)json["tabDatas"]=eval("("+datas+")");
    return json;
};

$.fn.tzTab.defaults = {
    width:600,//选项卡的宽度
    height:300,//选项卡的高度
    event:"click",//选项卡的事件类型
    background:"#4684b2",
    linear:"",
    border:"",
    index:0,//默认选择哪一个
    callback:function($current,$content){
        console.log($current.attr("data-url"),$content.context);
    },
    tabDatas:[
        {title:"选项卡1",content:"士大夫收到111","url":"user.action"},
        {title:"选项卡2",content:"士大夫收到22222","url":"delete.action"},
        {title:"选项卡3",content:"选项卡3333"}
    ]
};
	
		
